import React, { Component } from 'react'
import style from './style.less'
import { Link } from 'react-router-dom'
import Layout from '../Wrap'
import {connect} from 'react-redux'
import TableHeaderInternation from '../../components/TableHeaderInternation'
import ContentWrap from '../Content'
import { createForm } from 'rc-form'
import { Table, Button, message, Switch, Input, Select, Icon } from 'antd'
import {getInternationList, updatePoolEnable} from '../../actions/internationSystem'
import F from '../../helper/tool'
import {
  selectKey,
  deleteSelect,
} from '../../actions/search'
// import {queryAutoPoolRule} from '../../actions/internationRule'
// const { toContentState } = Mention
const {Wrap} = Layout
const Option = Select.Option

@connect((state) => {
  return {
    search: state.search,
    internationSystem: state.internationSystem,
    queryBest: state.search.queryBest,
  }
})
@createForm()
class InternationSystem extends Component {
  constructor(props) {
    super(props)
    this.outValues = {} // 搜索条件
    this.auditID = [] // 启用禁用的id
  }

  state = {
    visible: false,
    value: 2,
  }

  columns = [{
    title: '公海名称',
    dataIndex: 'name',
    render: (text, record) => {
      const topName = this.props.history.location.state.topName
      const url = `/CRM/internation/${record.key}?id=${record.key}&action=2&topName=${topName}&topicId=${record.topicId}`
      return (
        <Link to={url} target="_black">
          {text}
        </Link>
      )
    },
  }, {
    title: '公海管理员',
    dataIndex: 'sysList',
    render: (text, record) => {
      const sysList = record.sysList
      let sysNames = ''
      sysList.map((data, index) => {
        if(index <= 2){
          sysNames += data.chineseName
          if(index === 0 || index === 1){
           sysNames += '，'
           return null;
         }
        } else if(index === 3) {
          sysNames += '...'
          return null;
        }
        return null
      })
      return(
        <div>
          {sysNames}
        </div>
      )
    },
  }, {
    title: '公海成员',
    dataIndex: 'menList',
    render: (text, record) => {
      const menList = record.memList
      let memNames = ''
      menList.map((data, index) => {
        if(index <= 2){
          memNames += data.chineseName
          if(index === 0 || index === 1){
           memNames += '，'
           return null
         }
        } else if(index === 3) {
          memNames += '...'
          return null
        }
        return null
      })
      return(
        <div>
          {memNames}
        </div>
      )
    },
  }, {
    title: '是否启用',
    dataIndex: 'enable',
    render: (text, record) => {
      if(record.status === 0){
        return <Switch checkedChildren="开启" unCheckedChildren="关闭" onChange={ ()=> this.onChangeEnable(record.id,1)} />
      }else {
        return <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked onChange={ ()=> this.onChangeEnable(record.id,0)} />
      }
    },
  }]

  start = () => {
    this.setState({ loading: true })
    setTimeout(() => {
      this.setState({
        selectedRowKeys: [],
        loading: false,
      })
    }, 1000)
  }

  onSelectChange = (key, data) => { // 勾选表格
    data.map((item, index) => {
      // item.length === index ? number += item.number : number += item.number + ','
      const poolId = item.id
      this.poolId = poolId
      return {}
    })
    this.props.dispatch(selectKey(key))
    // this.props.dispatch(selectPoolId(key))
  }

  ruleUpdate = () => {
    if (this.poolId === undefined) {
      message.error('请选择一条数据进行规则维护！')
    } else {
      const poolId = this.poolId
      const url = `/CRM/internationRule?poolId=${poolId}`
      window.location.href = url
    }
  }

  renderHeaser = () => { // 表格头部
    return (
      <TableHeaderInternation ruleUpdate={this.ruleUpdate} />
    )
  }

  onChangeEnable = (id,status) => {
    const { page } = this.props.internationSystem
    // console.log(`switch to ${checked}`)
    console.log(status)
    const params={
      "id":id,
      "status":status,
    }
    this.props.dispatch(updatePoolEnable({...params})).then(data => {
      if (data) {
        message.success(data.msg)
        this.props.dispatch(getInternationList({
          pageNum: page.pageNum,
          pageSize: page.pageSize,
        }))
      }
    })
  }

  // handleQueryBest = (value) => { // 初级查询
  //   const { page } = this.props.internationSystem
  //   const ss = F.filterUndefind(value)
  //   this.queryCondition = ss
  //   this.props.dispatch(getInternationList({
  //     listType: 1,
  //     pageNum: page.pageNum,
  //     pageSize: page.pageSize,
  //     ...ss,
  //   }))
  // }

  handleQuery = () => { // 基本搜索
    const { page } = this.props.internationSystem
    this.props.form.validateFields((err, value) => {
      if(err) return
      const upData = F.filterUndefind(value)
      const outValues = {
        ...upData,
      }
      this.props.dispatch(getInternationList({
        pageNum: page.pageNum,
        pageSize: page.pageSize,
        ...outValues,
      }))
      this.outValues = outValues
    })
  }

  onShowSizeChange = (pageNum, pageSize) => { // 点击每页显示个数
    this.props.dispatch(getInternationList({
      pageNum,
      pageSize,
      ...this.outValues,
    }))
  }

  pageChange = (pageNum, pageSize) => { // 点击页数
    console.log(this.name)
    console.log(this.status)
    this.props.dispatch(getInternationList({
      pageNum,
      pageSize,
      ...this.outValues,
    }))
  }

  componentDidMount() {
    const { page } = this.props.internationSystem
    this.props.dispatch(getInternationList({ // 初始化list
      listType: 1,
      pageNum: page.pageNum,
      pageSize: page.pageSize,
    }))
  }

  componentWillUnmount() {
    this.props.dispatch(deleteSelect)
  }

  render() {
    // const { queryBest } = this.props
    const { getFieldProps } = this.props.form // getFieldError
    const { list, page, loading} = this.props.internationSystem // count, feadBack
    const { selectedRowKeys } = this.props.search
    // console.log(remark)
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    }
    let pagination = {
      onChange: this.pageChange,
      onShowSizeChange: this.onShowSizeChange,
      total: page.total,
      defaultCurrent: page.pageNum,
      pageSize: page.pageSize,
      showSizeChanger: true,
      showQuickJumper: true,
    }
    return (
      <Layout>
        <Wrap>
          <div className={style.MyClueWrap}>
            <ContentWrap style={{ borderTop: 'none' }}>
              <div className={style.listHeader}>
                <div className={style.listTitle}>
                  <div>
                    <Icon type="search" className={style.search} />
                    &ensp;筛选查询
                  </div>
                </div>
                <div className={style.listTop}>
                  <div className={style.formGroup}>
                    <label htmlFor="">输入搜索：</label>
                    <div>
                      <Input style={{ width: 220 }} {...getFieldProps('name')} placeholder="请输入公海名称/管理员/成员" />
                    </div>
                  </div>
                  <div className={style.formGroup}>
                    <label htmlFor="">启用状态：</label>
                    <div>
                      <Select  defaultValue="2" placeholder="请选择状态" style={{ width: 120 }} {...getFieldProps('status')}>
                        <Option value="">请选择状态</Option>
                        <Option value="1">启用</Option>
                        <Option value="0">禁用</Option>
                      </Select>
                    </div>
                  </div>
                  <div>
                    <Button onClick={this.handleQuery}>搜索</Button>
                  </div>
                </div>
              </div>
              <Table
                loading={loading}
                title={this.renderHeaser}
                className={style.table}
                rowSelection={rowSelection}
                columns={this.columns}
                dataSource={list}
                pagination={pagination}
              />
            </ContentWrap>
          </div>
        </Wrap>
      </Layout>
    )
    // console.log(this.props)
  }
}

export default InternationSystem
